<template>
	<view class="page-user">
		<view class="bgwhite">
			<view class="info_main">
				<view>头像</view>

				<!-- <avatar
						selWidth="400upx"
						selHeight="400upx"
						@upload="myUpload"
						:avatarSrc="'../../static/missing-face.png'"
						avatarStyle="width: 120upx; height: 120upx; "
					></avatar> -->
				<u-avatar :src="userInfo.avatar||'../../static/images/my/avatar.jpg'"></u-avatar>
				<!-- <u-avatar :text="text"></u-avatar> -->

			</view>
			<view class="info_cont">
				<view>昵称</view>
				<input class="color999" v-model="userInfo.nickname" type="text" placeholder="输入中文或英文，1~8个字" />
			</view>
			<view class="info_cont" @click="show_sex_picker = true">
				<view>性别</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.sex || '请选择性别' }}</view>
			</view>
			<view class="info_cont" @click="show_date_picker = true">
				<view>生日</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.birthday || '请选择生日' }}</view>
			</view>
			<view class="info_cont" @click="show_addr_picker = true">
				<view>所在地</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.addr || '请选择地址' }}</view>
			</view>
			<view class="info_cont">
				<view>手机号</view>
				<text class="iconfont icon-fanhui1"></text>
				<input class="color999" type="text" :value="userInfo.username" disabled="true" />
			</view>
		</view>
		<view class="confirm-btn" @click="submit">确定</view>
		<w-picker :visible.sync="show_sex_picker" mode="selector" :options="sex_arr" value="女"
			@confirm="onConfirm($event, 'sex')" @cancel="onCancel" ref="selector"></w-picker>

		<w-picker :visible.sync="show_date_picker" mode="date" startYear="1920" endYear="2021" :current="true"
			fields="day" @confirm="onConfirm($event, 'date')" @cancel="onCancel" :disabled-after="false" ref="date">
		</w-picker>

		<w-picker :visible.sync="show_addr_picker" mode="region" :value="userInfo.addr_code" default-type="value"
			:hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>
	</view>
</template>

<script>
	import {editUserInfo} from '@/api/index.js'
	export default {
		data() {
			return {
				// src: '../../static/my/avatar.jpg',
				// text: '无头像',
				// name:''
				show_sex_picker: false,
				show_date_picker: false,
				show_addr_picker: false,
				sex_arr: [{
						label: '男'
					},
					{
						label: '女'
					}
				]
			}
		},
		computed: {
			userInfo() {
				return {
					...this.$store.state.userInfo
				}
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

			onConfirm(e, type) {
				if (type == 'sex') {
					this.userInfo.sex = e.result;
				}
				if (type == 'date') {
					this.userInfo.birthday = e.result;
				}
				if (type == 'region') {
					this.userInfo.addr = e.result;
					this.userInfo.addr_code = e.value;
				}
			},
			onCancel() {
				this.show_sex_picker = false;
				this.show_date_picker = false;
				this.show_addr_picker = false;
			},
			submit(){
				// console.log(this.userInfo.nickname)
				let { avatar, nickname, sex, birthday, addr, addr_code } = this.userInfo;
				let uid = this.$store.state.uid
				editUserInfo({avatar, nickname, sex, birthday, addr, addr_code,uid}).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.bgwhite {
		background: #fff;
	}

	.page-user {
		width: 100%;
		height: 100%;

		.info_main {
			width: 100%;
			height: 151upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden;
			padding: 0 30upx;

			view {
				font-size: 30upx;
				color: #999999;
			}

			image {
				float: right;
				width: 94upx;
				height: 94upx;
				border-radius: 50%;
			}
		}

		.info_main:after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #eeeeee;
		}

		.info_cont {
			width: 100%;
			height: 101upx;
			position: relative;
			overflow: hidden;
			padding: 0 30upx;

			view {
				font-size: 30upx;
				line-height: 101upx;
				color: #999999;
				float: left;
			}

			.txt {
				display: block;
				width: auto;
				height: 101upx;
				float: right;
				text-align: right;
				margin-right: 10upx;
				font-size: 30upx;
				width: 500upx;
			}

			.uni-input,
			input {
				display: block;
				width: auto;
				height: 101upx;
				float: right;
				text-align: right;
				margin-right: 10upx;
				font-size: 30upx;
				width: 500upx;
			}

			text {
				font-size: 14upx;
				color: #bfbfbf;
				float: right;
				line-height: 101upx;
			}

			.iconfont {
				font-size: 28upx;
			}
		}

		.uni-input-placeholder {
			color: #999;
		}

		.info_cont:after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #eeeeee;
		}
	}

	.confirm-btn {
		width: 80%;
		height: 80upx;
		background: #fdd100;

		border-radius: 60upx;
		margin: 40upx auto;

		text-align: center;
		color: #fff;
		line-height: 80upx;
		font-size: 30upx;
	}
</style>
